<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>130-动画-匀速动画-反向动画.html</title>
	<style>
		*{
			margin: 0;
			padding: 0;
			}
		#box{
			position: absolute;
			top: 50px;
			left: 800px;
			width: 100px;
			height: 100px;
			background: red;
		}
		.line{
			width: 1px;
			height: 400px;
			background: #000;
			position: absolute;
			top: 0;
			left: 400px;
			
		}
	</style>
</head>
<body>
	<button id="btn">开始动画</button>
	<div id="box"></div>
	<div class="line"></div>
</body>
<script>
	var oBtn = document.getElementById('btn'); 
	var oBox = document.getElementById('box'); 
	var timer = null;
	oBtn.onclick = function(){
		clearInterval(timer);
		var iSpeed = 0;
		timer = setInterval(function(){
			// console.log("timer::",timer);
			if(oBox.offsetLeft > 400){
				iSpeed = -10;
			}else{
				iSpeed = 10;
			}
			if(oBox.offsetLeft == 400){
				clearInterval(timer);
			}else{
				oBox.style.left = oBox.offsetLeft + iSpeed + 'px';
			}
		},30)
	}
</script>
</html>